<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传 & 预览</title>
    <style>
        #preview-container {
            margin-top: 10px;
        }
        #preview-video, #preview-image {
            max-width: 100%;
            display: none;
        }
    </style>
</head>
<body>

<form id="upload-form">
    <label for="upload">选择文件 (图片/视频):</label>
    <input type="file" id="upload" name="upload" accept="image/*,video/*">
</form>

<!-- 预览区域 -->
<div id="preview-container">
    <img id="preview-image" alt="图片预览">
    <video id="preview-video" controls></video>
</div>

<script>
    const uploadInput = document.getElementById('upload');
    const previewImage = document.getElementById('preview-image');
    const previewVideo = document.getElementById('preview-video');

    uploadInput.addEventListener('change', function (event) {
        const file = event.target.files[0];
        if (!file) return;

        // 释放之前的对象 URL
        if (previewImage.src) URL.revokeObjectURL(previewImage.src);
        if (previewVideo.src) URL.revokeObjectURL(previewVideo.src);

        const fileURL = URL.createObjectURL(file);

        if (file.type.startsWith('image/')) {
            previewImage.src = fileURL;
            previewImage.style.display = 'block';
            previewVideo.style.display = 'none';
        } else if (file.type.startsWith('video/')) {
            previewVideo.src = fileURL;
            previewVideo.style.display = 'block';
            previewImage.style.display = 'none';
        }
    });
</script>

</body>
</html>
